<template>
    <div class="my-container">
      <div  v-if="$store.state.user" class="header user-info">
        <div class="base-info">
            <div class="left">
              <van-image
              round
              fit="cover"
              class="aveter"
               :src="userInfo.photo"
               />
               <span class="name">{{userInfo.name}}</span>
            </div>
            <van-button  round type="default" size="small"  to="/user/profile">编辑资料</van-button>
        </div>
        <div class="user-stats">
          <div class="stats-item">
            <span class="item-count">
              {{userInfo.art_count}}
            </span>
            <span class="item-text">
              头条
            </span>
          </div>
          <div class="stats-item">
            <span class="item-count">
              {{userInfo.follow_count}}
            </span>
            <span class="item-text">
              关注
            </span>
          </div>
          <div class="stats-item">
            <span class="item-count">
              {{userInfo.fans_count}}
            </span>
            <span class="item-text">
              粉丝
            </span>
          </div>
          <div class="stats-item">
            <span class="item-count">
              {{userInfo.like_count}}
            </span>
            <span class="item-text">
              获赞
            </span>
          </div>
        </div>
    </div>
    <div v-else  class="header not-login">
       <div class="login-btn" @click="$router.push('/login')">
        <img class="mobile-img" src="~@/assets/mobile.png">
        <span class="text">登陆 / 注册</span>
       </div>

      </div>
    <!--宫格导航-->
    <van-grid  class="grid-nav" :column-num="2" clickable>
      <van-grid-item class="grid-item"  >
        <i slot="icon" class="iconfont icon-shoucang"></i>
        <span slot="text" class="item-text">收藏</span>
      </van-grid-item>
      <van-grid-item class="grid-item"  >
        <i slot="icon" class="iconfont icon-lishi"></i>
        <span slot="text" class="item-text">历史</span>
      </van-grid-item>
    </van-grid>
    <van-cell class="new-msg" title="消息通知" is-link />
    <van-cell class="mb-9" title="小智同学" is-link />

    <van-cell v-if="$store.state.user" class="logout" @click="logout" center title="退出登录" />

    </div>
  </template>

<script>
import { getUser } from '@/api/user'
export default {
  name: 'MyPage',
  components: {},
  props: {},
  data () {
    return {
      userInfo: {}
    }
  },
  computed: {},
  watch: {},
  created () {
    if (this.$store.state.user) {
      this.loadUser()
    }
  },
  mounted () {},
  methods: {
    async loadUser () {
      try {
        const res = await getUser()
        this.userInfo = res.data.data

        window.console.log(res)
      } catch (err) {
        let message = '出现未知错误,稍后再试'
        if (err.response && err.response.status === 401) {
          message = '用户未登录，请先登录！'
          this.$toast.fail(message)
          this.$router.push({
            name: 'login'
          })
          return
        }
        this.$toast.fail(message)
        window.console.log(err)
      }
    },
    logout () {
      this.$dialog.confirm({
        title: '确定要退出吗？'

      })
        .then(() => {
          this.$store.commit('removeUser')
        })
        .catch(() => {
          // on cancel
          window.console.log('取消推出一次')
        })
    }
  }
}
</script>

<style scoped>
.my-container {
   .header {
    height: 361px;
    background: url("~@/assets/banner.png") no-repeat;
    background-size: cover;

  }

  .user-info{

      .base-info{
        height: 231px;
        padding: 76px 32px 23px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .left{
          display: flex;
          align-items: center;
          .aveter{
            width: 132px;
            height: 132px;
            border: 3px solid #fff;
            margin-right: 23px;

          }
          .name{
            font-size: 30px;
            color: #fff;
          }
        }
      }
      .user-stats{

        display: flex;
        .stats-item{
          padding-top: 10px;
          flex: 1;
          height: 130px;
          display: flex;
          flex-direction: column;
          align-items: center;
          color: #fff;
          .item-count{
            font-size: 36px;
            margin-bottom: 10px;
          }
          .item-text{
            font-size: 23px;
          }

        }
      }

  }

  .not-login{
    display: flex;
    justify-content: center;
    align-items: center;
    .login-btn{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .mobile-img{
            width: 132px;
            height: 132px;
            margin-bottom: 15px;
        }
        .text{
            font-size: 28px;
            color: white;
        }
    }

  }

  .grid-nav{

    .grid-item{
      height: 141px;
      .iconfont {
         font-size: 45px;
      }
      .icon-shoucang{
        color: #eb5253;
      }
      .icon-lishi{
        color: #ff9d1d;
      }
      .item-text{
        font-size: 28px;

      }

    }
  }
  .mb-9 {
    margin-bottom: 10px;
  }
  .new-msg{
    margin-top:10px
  }

  .logout{
    text-align: center;
    color: #d86262;
  }

}

</style>
